<template>
  <el-container class="container">
    <el-header class="header">
      <div class="inner-content">
        <div class="layout">
          <div>陕西航空职业技术学院 信息中心</div>
          <div>校园网指南 信息化服务 下载中心 作风建设 搜索框</div>
        </div>
      </div>
    </el-header>
    <el-main class="main">
      <div class="content" style="background-color: #0b2c80; height: 318px;">
        <div class="inner-content banner" style="display: flex; justify-content: right; align-items: center;">
          <div style="width: 500px; color: white; font-size: 18px; line-height: 30px;">
            信息中心作为学校直属单位，履行学校信息化建设领域的技术、管理和服务三方面的职能，统筹全校信息化基础设施、信息系统和信息资源的建设与共享。信息中心的工作职责是承担学校的信息化规划、标准、流程、资金管理，以及信息化基础设施建设管理及维护、信息系统建设管理及维护、校园通讯市场管理、信息安全和信息技术服务等工作。
          </div>
        </div>
      </div>
      <div class="content">
        <div class="inner-content">
          <div class="layout">
            <el-card shadow="hover" style="width: 30%;">
              <template #header>
                <div class="card-header">
                  <span>新闻资讯</span>
                </div>
              </template>
              <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
            </el-card>
            <el-card shadow="hover" style="width: 30%;">
              <template #header>
                <div class="card-header">
                  <span>自助服务</span>
                </div>
              </template>
              <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
            </el-card>
            <el-card shadow="hover" style="width: 30%;">
              <template #header>
                <div class="card-header">
                  <span>资源与服务</span>
                </div>
              </template>
              <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
            </el-card>
          </div>
          <div class="layout">
          </div>
        </div>
      </div>
      <div class="content" style="background-color: #0b75ce; padding: 20px 0px;">
        <div class="inner-content">
          <div style="display: flex; justify-content: center; align-items: center;">
            <div style="font-size: 32px; line-height: 50px; color: white;">
              推荐信息
            </div>
          </div>
          <el-divider></el-divider>
          <div class="layout">
            <div style="width: 25%; height: 200px;">
              移动应用平台
            </div>
            <div style="width: 25%; height: 200px;">
              网络安全防护
            </div>
            <div style="width: 25%; height: 200px;">
              数据中心
            </div>
            <div style="width: 25%; height: 200px;">
              计费管理系统
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <el-footer style="border-top: 1px solid #EDEDED;">
      <div class="layout">
        陕西航空职业技术学院 图书馆 综合档案室 信息安全 规章制度 关于我们
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import {defineComponent, ref} from "vue";

export default defineComponent ({
  name: 'Portal',
  setup() {
    const src = ref(
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    )
    const src1 = ref('https://img.zcool.cn/community/01282356f2501632f875a94494f06b.jpg@2o.jpg')
    const src2 = ref('http://nic.whu.edu.cn/dfiles/9782/themes/simplebootx/public/assets/images/bg1.png')

    return {
      src,
      src1,
      src2
    }
  },
})
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
    color: #555;
  }
  .header, footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main {
    padding: 0;
  }
  .content {
    display: flex;
    justify-content: center;
  }
  .inner-content {
    width: 70%;
  }
  .banner {
    background-repeat: no-repeat;
    background-size:auto 100%;
    background-image: url('http://nic.whu.edu.cn/dfiles/9782/themes/simplebootx/public/assets/images/bg1.png')
  }
  .layout {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .bd {
    border: 1px solid red;
  }
</style>